<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="搜索" left-arrow></Base-Navbar>

    <div class="container">
      <!-- 搜索栏 -->
      <div class="mb-10">
        <van-search
          placeholder="请输入你要搜索的商品"
          :clearable="false"
          @search="getProductList"
          v-model="keyword"
        ></van-search>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab
          @change="getProductList"
          v-model:index="tabIndex"
          v-model:value="tabValue"
        ></Base-Tab>
      </div>

      <!-- 产品列表 -->
      <div class="box opacity">
        <ul class="list">
          <li class="item" v-for="(v, i) in products" :key="i">
            <product-item :v="v"></product-item>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

import productItem from './components/product_item.vue'

const tabIndex = ref(0)
const tabValue = ref('shopping')
const keyword = ref('')

const products = ref([])

getProductList()

// 获取产品列表
async function getProductList() {
  const params = {
    page: 1,
    pageNum: 10000,
    keyword: keyword.value,
    delivery: tabValue.value,
  }

  const { code, data } = await api.getProductList(params)

  if (code === 1) {
    products.value = data.data
  }
}
</script>

<style lang="scss" scoped></style>
